<template>
  <div class="fu-main">
    <div class="dash">
      <TitleBar title="操作日志" refresh />
      <div class="fu_quyu" style="margin-bottom: 20px;">
        <div class="top">筛选查询</div>
        <!-- 数据 -->
        <div class="he">
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="操作人员:">
              <el-select v-model="form.value" placeholder="请选择人员">
                <el-option
                  v-for="item in isList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="操作时间:">
              <el-date-picker
                v-model="time_a"
                align="right"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择日期"
              />
            </el-form-item>
            <el-button type="primary" @click="addseekLog">搜索</el-button>
          </el-form>
        </div>
      </div>
      <div class="conten">
        <div class="top">数据列表</div>
        <div class="handle">
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="清除日志:">
              <el-date-picker
                v-model="time_b"
                align="right"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择清除的日期"
              />
            </el-form-item>
            <el-button type="primary" @click="delectLog">确定</el-button>
            <el-form-item label="显示条数:">
            <el-select v-model="page" @change="getPage" placeholder="显示条数">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            </el-form-item>
          </el-form>
        </div>
        <el-table
          :data="this.dataList"
          :header-cell-style="{
          'height':'56px',
          'background':'#F2F2F2',
        }"
          style="border:1px solid #E6E6E6;padding-bottom:59px;margin-bottom:59px"
        >
          <el-table-column label="编号" align="center">
            <template slot-scope="scope">
              <span style="display:block; text-align:center;">{{scope.$index+1}}</span>
            </template>
          </el-table-column>
          <el-table-column height="100" label="操作者" align="center">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <span style="display:block;text-align:center;">{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作日期" align="center">
            <template slot-scope="scope">
              <span style="display:block;text-align:center;">{{ scope.row.operateTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="IP地址" align="center">
            <template slot-scope="scope">
              <span style="display:block;text-align:center;">{{ scope.row.ip }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作记录" align="center">
            <template slot-scope="scope">
              <span style="display:block;text-align:center;">{{ scope.row.operateRecode }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 分页 -->
    <div class="xiao">
      <pagination :pagination="pagination1" @changepage="initList" />
    </div>
  </div>
</template>

<script>
import { getOperateLog, delLog, seekLog, getPrope } from "@/api/homeLog.js";
export default {
  data() {
    return {
      pagination1: {},
      checkAll: false,
      dataTotal: "",
      // 页面数据
      dataList: [],
      // 分页
      currentPage: 1,
      pageNum: 1,
       options: [{
          value: '5',
          label: '5'
        }, {
          value: '10',
          label: '10'
        }],
      page: '',
      adminCode: "d",
      name: "dms",
      checked: true,

      time_a: "",
      time_b: "",
      isList: [],
      isList_a:[],
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        value: ""
      }
    };
  },
  created() {
    this.initList();
    this.init();
  },
  methods: {
    // 页码排序
    getPage(pageNum = 1){
      getOperateLog({
        pageNum,
        pageSize: this.page
      }).then(res => {
        this.pagination1 = res.data;
        this.dataList = res.data.list;
      });
    },
    // 初始化
    initList(pageNum = 1) {
      getOperateLog({
        pageNum,
        pageSize: this.page
      }).then(res => {
        this.pagination1 = res.data;
        this.dataList = res.data.list;
        this.dataTotal = res.data.list.total;
      });
    },
    // 操作人员初始化
    init() {
      let isName = [];
      let isCode = [];
      getPrope().then(res => {
        this.isList = res.data;
      });
    },
    // 按时间删除
    delectLog() {
      if (this.time_b != "") {
        delLog({
          operateTime: this.time_b
        }).then(res => {
          this.initList();
        });
      } else {
        this.$message({
          message: "请选择时间！",
          type: "warning"
        });
      }
    },
    // 管理人员-时间搜索
    addseekLog() {
      if (this.time_a != "" || this.form.value != "") {
        getOperateLog({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          operateTime: this.time_a,
          adminCode: this.form.value
        }).then(res => {
          if (res.code == 200) {
            this.dataList = res.data.list;
          }
        });
      } else {
        this.$message({
          message: "至少有一项为必填项！",
          type: "warning"
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.fu-main {
  padding: 0 144px 0 22px;
  .top {
    margin: 0 17px;
    height: 56px;
    line-height: 56px;
    border-bottom: 2px solid #ccc;
    font-size: 14px;
    font-family: PingFangSC;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    letter-spacing: 1px;
  }
  .fu_quyu {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;

    .he {
      padding: 23px 0 31px 0;
      .el-form-item {
        float: left;
        padding-left: 15px;
        margin-right: 25px;
      }
    }
  }
  .conten {
    padding: 0 22px;
    .top{
      margin: 0;
    }
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    .handle{
      padding: 8px 0 27px 0;
       .el-form-item {
        float: left;
        padding-left: 15px;
        margin-right: 25px;
      }
      button{
         float: left;
      }
      span{
        display: block;
        height: 48px;
      }
    }
  }
  .xiao{
    height: 150px;
  }
}
</style>
